<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应内部元素</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box{
            width: min-content;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>自适应内部元素</h1>
        <ul>
            <li>min-content解析这个容器内最大的不可断行元素的宽度(最宽的单吃，图片，具有固定宽度的盒尺寸)</li>
        </ul>
        <div class="box">
            <p>让
            <figure> 元素浮动会让它得到正确的宽度，但同时也彻底改变了
                它的布局模式，这往往会导致我们不想要的结果（参见图 7-2）。</p>
                <img src="../01背景与边框/img/logo.png" alt="">
                <p>对 figure 应用 display: inline-block 会让它根据内容来决定自身的
                    尺寸，但跟我们想要的方式还是不一样（参见图 7-3）。此外，即使它的
                    宽度计算方式与我们的期望一致，我们也很难继续完成水平居中的任务。
                    我们需要对它的父元素应用 text-align: center，然后对这个父元素的
                    所有子元素（p, ul, ol, dl, ...）都设置一遍 text-align: left。</p>
                <p>
                    当开发者走投无路时，就只能对 figure 应用一个固定的 width 或
                    max-width 了，然后对 figure > img 应用 max-width: 100%。可
                    是这个方法无法充分利用有效空间；对于过小的图片来说，布局效
                    果也很突兀。此外，响应式也无从谈起。
                </p>
        </div>
    </div>
</body>

</html>